/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/
@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
@use '../internal/styles/tokens' as awsui;
@use '../internal/styles' as styles;
@use '../internal/styles/typography' as typography;
@use '../internal/styles/foundation' as foundation;
@use './motion';
@use './collapsible';

.flashbar {
  position: relative;
  /* stylelint-disable-next-line selector-max-type */
  > li + li {
    // Avoid Flashbar list gets additional padding to fix issue AWSUI-20382
    padding-block-start: 0;
  }
}

.flashbar,
.flash {
  @include styles.styles-reset;
}

.flash {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-block: awsui.$space-flashbar-vertical;
  padding-inline: awsui.$space-flashbar-horizontal;
  border-start-start-radius: awsui.$border-radius-flashbar;
  border-start-end-radius: awsui.$border-radius-flashbar;
  border-end-start-radius: awsui.$border-radius-flashbar;
  border-end-end-radius: awsui.$border-radius-flashbar;
  color: awsui.$color-text-notification-default;
  overflow-wrap: break-word;
  word-wrap: break-word;
  box-shadow: awsui.$shadow-flash-sticky;

  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
}

.initial-hidden {
  overflow: hidden;
  block-size: 0;
}

.flash-list {
  list-style: none;
  padding-block: 0;
  padding-inline: 0;
  margin-block: 0;
  margin-inline: 0;

  &:not(.collapsed) {
    > li:not(:last-child) {
      margin-block-end: awsui.$space-xxxs;
    }
  }
}

.flash-body {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  min-inline-size: 0;
  column-gap: awsui.$space-flashbar-action-left;
}

.flash-focus-container {
  display: flex;
  flex: 1;
  min-inline-size: 70%;

  &:focus {
    outline: none;
  }
  @include focus-visible.when-visible {
    @include styles.focus-highlight(
      $gutter: awsui.$space-button-focus-outline-gutter,
      $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
      $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
    );
  }
}

.flash-text {
  margin-block: awsui.$border-item-width;
  margin-inline: 0;
  padding-block: awsui.$space-scaled-xxs;
  padding-inline: awsui.$space-xxs;
}

.flash-icon {
  flex: 0 0 auto;
  padding-inline-start: 0;
}

.flash-message {
  flex: 1 1 0%;
  @include styles.text-flex-wrapping;
}

.hidden {
  display: none;
}

.flash-header,
.header-replacement {
  font-weight: styles.$font-weight-bold;
}

.flash-content,
.content-replacement {
  /* Only used as a selector for test-utils */
}

.dismiss-button-wrapper {
  flex: 0 0 auto;
  margin-inline: awsui.$space-s calc(-1 * #{awsui.$space-xxs});
  padding-inline-end: awsui.$space-flashbar-dismiss-right;
}

.dismiss-button {
  /* Only used as a selector for test-utils */
}

.action-button-wrapper {
  white-space: nowrap;
}
.action-wrapped {
  margin-inline-start: awsui.$space-l;
  padding-inline-start: awsui.$space-xxs;
  margin-block-end: awsui.$space-xxs;
}

.action-button,
.action-slot {
  /* Only used as a selector for test-utils */
}

.flash-type-success {
  background-color: awsui.$color-background-notification-green;
}

.flash-type-error {
  background-color: awsui.$color-background-notification-red;
}

.flash-type-info,
.flash-type-in-progress {
  background-color: awsui.$color-background-notification-blue;
}

.flash-type-warning {
  color: awsui.$color-text-notification-yellow;
  background-color: awsui.$color-background-notification-yellow;
}
